<template>
    <div id="app">
        <div class="top"> <router-link to="./home"> < 今日特价 </router-link></div>
        <div class="row">
            <div class="col-4">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
                    <router-link to="" class="nav-link  " v-for="(obj,index) in listLeft"  :class="{active:obj.flag}" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"  @click.native="toDo(obj.name)">
                        <!--左侧导航标题-->
                        {{obj.title}}
                    </router-link>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade active show " id="v-pills-home" role="tabpanel"
                    >
                        <div v-for="(obj,index) in listRight[0][temp]" :key="index" >
                            <div><img :src="obj.src" alt="" width="100%"></div>
                            <div>
                                <h6>{{obj.name}}</h6>
                                <p><span class="price">￥{{obj.price}}</span></p>
                                <p class="num">销量 {{obj.num}} 笔</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'Cheap',
        data(){
            return {
                isOn:0,
                temp:'bargin',
                listLeft:[
                    {
                        title: "今日特价",
                        name:'bargin',
                        flag:true
                    },
                    {
                        title: "水果蛋糕",
                        name:'fruit',
                        flag:false
                    },
                    {
                        title: "儿童蛋糕",
                        name:'kid',
                        flag:false
                    },
                    {
                        title: "祝寿蛋糕",
                        name:'old',
                        flag:false
                    },
                    {
                        title: "鲜花蛋糕",
                        name:'flower',
                        flag:false
                    },
                    {
                        title: "慕斯蛋糕",
                        name:'musi',
                        flag:false
                    },
                    {
                        title: "奶油蛋糕",
                        name:'cream',
                        flag:false
                    },
                    {
                        title: "网红蛋糕",
                        name:'red',
                        flag:false
                    },
                ],
                listRight:[
                    {
                        bargin: [
                            {
                                src: './img/tejia1.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:true
                            },
                            {
                                src: './img/tejia2.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:true
                            },
                        ],
                        fruit: [
                            {
                                src: './img/tejia3.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia4.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        kid:[
                            {
                                src: './img/tejia5.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia6.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        old:[
                            {
                                src: './img/tejia1.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia3.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        flower:[
                            {
                                src: './img/tejia2.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia4.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        musi:[
                            {
                                src: './img/tejia2.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia3.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        cream:[
                            {
                                src: './img/tejia3.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia5.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                        red:[
                            {
                                src: './img/tejia4.png',
                                name: '粉嫩猫头-奶油蛋糕',
                                price: 98,
                                num: 5674,
                                isShow:false
                            },
                            {
                                src: './img/tejia6.png',
                                name: '果缤纷-水果蛋糕',
                                price: 108,
                                num: 7274,
                                isShow:false
                            },
                        ],
                    },
                ]
            }
        },
        methods:{
            toDo(aa){
                this.temp=aa;
            }
        },
        mounted(){
            this.$axios('http://localhost:3000/Cheap').then((data)=>{
                // console.log(data);
                // this.temp =JSON.parse(data.data[0].temp);  //JSON字符转成数组
                // this.listLeft =JSON.parse(data.data[0].listLeft);  //JSON字符转成数组
                // this.listRight =JSON.parse(data.data[0].listRight);  //JSON字符转成数组
            }).catch((err)=>{
                console.log(err);
            })
        }
    }
</script>
<style lang="less" scpoed>
    /*头部标题导航部分*/
    .top{
        height: 60px;
        line-height: 60px;
        background: #C25654;
        padding: 0 25px;
    }
    .top a{
        color: white;
        text-decoration: none;
        font-size: 20px;
    }
    /*左边导航栏部分样式*/
    .row .col-4 {
        height: 40px;
        line-height: 40px;
    }
    .row .col-4 .flex-column{
        background: #ddd;
    }
    .row .col-4 .flex-column a{
        color: black;
    }
    .row .col-4 .flex-column .active{
        background: white;
        color: #C01720;
        border-right: none;
        border-left: 4px solid  #C01720;
    }
    /*设置商品内容部分样式*/
    #v-pills-tabContent .tab-pane>div {
        width: 100%;
    }
    //装商品的盒子设置弹性布局
    #v-pills-tabContent .tab-pane>div{
        width: 100%;
        display: flex;
        margin-top: 40px;
    }
    //装图片的盒子
    #v-pills-tabContent .tab-pane>div div:first-child{
        flex:1;
    }
    //设置图片大小
    #v-pills-tabContent .tab-pane>div div:first-child img{
        width: 100%;
    }
    //商品文字部分
    #v-pills-tabContent .tab-pane>div div:last-child{
        flex:2;
        margin-left: 10px;
    }
    /*商品文字部分样式*/
    #v-pills-tabContent .tab-pane>div div:last-child p .price{
        color: red;
    }
    /*销量部分文字*/
    #v-pills-tabContent .tab-pane>div div:last-child .num{
        font-size: 16px;
        color: #aaa;
    }
</style>